<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tb{
            box-sizing: border-box;

        }
        .a{
            width: 100%;
            height: 100px;
            border: 1px solid red;
        }
        .a1{
            position: absolute;
            width: 30%;
            text-align: center;
            float: left;
            font-size: 20px;
            color: #FF4401;
            margin: 30px 0 0 0 ;
        }
        .a2{
            position: absolute;
         background: #FEF2F2;
            height: 30px;
          width: 50%;
            margin: 30px 0 0 30% ;

        }
        .a2-1{
            position: absolute;
            bottom: 28%;
             left: 60px;
            text-align: center;
            font-size: 12px;
        }
        .a3{
            border: 1px solid greenyellow;
            margin: 70px 0 0 75%;
        }
        .a3-1{
            width: 20px;
        }
        .b{
            box-sizing: border-box;
            width: 100%;
            border: 1px solid royalblue;
        }
        .b1{
            height: 700px;
            position: absolute;
        }

        .b2{
            position: absolute;
            border: 1px solid green;
            width: 300px;
            height: 350px;
           margin: 220px  0 0 1550px ;
            background:#E9E9F2;
        }
        .zc1{
            position: absolute;
            font-size: 20px;
            margin: 25px 0 0 20px;
        }
        .zc1-a{
            position: absolute;
            margin: 0 0 0 80px ;

        }
        .zc1-a1{
            width: 150px;
        }
       .zc1-a2{
           position: absolute;
           margin: 0 0 0 220px ;
       }
        .zc1-a2-a1{
            width: 80px;
        }

        .zc2{
            position: absolute;
            margin: 80px  0 0 40px;

        }
        .z2-a1{
            width: 40px;
        }
        .z2-a2{
            position: absolute;
            margin: 3px 0 30px 0;
            height: 28px;
        }
        .zc3{
            position: absolute;
            margin: 140px  0 0 40px;
        }
        .z3-a1{
            width: 40px;
        }
        .z3-a2{
            position: absolute;
            margin: 3px 0 27px 0;
            height: 28px;
        }

        .zc4{
            position: absolute;
            margin: 200px  0 0 45px;
            border: 1px solid whitesmoke;
            background:#FF4400;
            width: 210px;
            height: 40px;
        }

        .z4-a2{
            position: absolute;
            margin: 8px 0 0 85px;
            color: whitesmoke;
        }
        .zc5-a{

          margin: 250px 0 0 30px ;
            width: 20px;
        }
        .zc5-b{
            position: absolute;
            margin: 250px 0 0 2px ;
        }
        .zc5-c{
            position: absolute;
            margin: 250px 0 0 2px ;
        }

        .zc6{
            position: absolute;
            width: 100%;
            border: 1px solid red;
        }
        .zc6-a{
            position: absolute;
            margin: 30px 0 0 60px ;
            font-size: 15px;
        }
        .zc6-b{
            position: absolute;
            margin: 30px 0 0 130px  ;
            font-size: 15px;
        }
        .zc6-c{
            position: absolute;
            margin: 30px 0 0 220px  ;
            font-size: 15px;
        }
    </style>
</head>
<body>
<div class="tb">
  <div class="a">
  <div class="a1">淘 宝 网<br/>Taobbao.com</div>
      <div class="a2"><font class="a2-1">为确保您账户的安全及正常使用，依《网络安全法》相关要求，6月1日起会员账户需绑定手机。如您还未绑定，请尽快完成，感谢您的理解及支持！</font></div>
      <div class="a3"><img src="img/Snipaste_2020-03-05_20-49-41.png" class="a3-1">"登录页面"改进建议</div>
  </div>
    <div class="b"> 
        <div > <img src="img/Snipaste_2020-03-05_21-09-49.png" class="b1">
            <div class="b2">
                <div class="zc1">密码登录</div>
                <div class="zc1-a"> <img src="img/Snipaste_2020-03-05_21-39-48.png" class="zc1-a1"></div>
                <div class="zc1-a2"> <img src="img/Snipaste_2020-03-05_21-41-54.png" class="zc1-a2-a1"></div>
                <div class="zc2"><img src="img/Snipaste_2020-03-05_22-20-54.png" class="z2-a1"><input type="txt" name="name" class="z2-a2"> </input></div>
                <div class="zc3"><img src="img/Snipaste_2020-03-05_22-33-31.png" class="z3-a1"><input type="password" name="password" class="z3-a2"></input></div>
                <div class="zc4"> <font class="z4-a2">登  录</font></div>
                <div class="zc5"><img src="img/Snipaste_2020-03-05_22-59-54.png" class="zc5-a"><a href="#" class="zc5-b">微博登录</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <img src="img/Snipaste_2020-03-05_23-12-16.png"><a href="#" class="zc5-c">支付宝登录</a></div>
                <div class="zc6">
                 <div class="zc6-a"><a href="#">忘记密码</a></div>
                 <div class="zc6-b"><a href="#">忘记会员名</a></div>
                 <div class="zc6-c"><a href="#">免费注册</a></div>
                </div>
            </div>


        </div >

    </div>
</div>
</div>

</body>
</html>